<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script type="module">
  import { projects, cameras } from './data.js'
  const params = { id: "1722072636940357634" };

  function filterCameras(cameras) {
    // 可以播放的列表
    const cameraSure = [];
    // 原始列表
    const __cameras = cameras.map((camera) => {
      const { equipmentConfig, equipmentName } = camera;

      camera.title = equipmentName;
      if (equipmentConfig?.gbVideoConfig) {
        const { sipUser, videoChannelId, sipServerHost, sipServerPort } = equipmentConfig.gbVideoConfig;
        camera.stream_path = `${sipUser}/${videoChannelId}`;
        camera.channelId = videoChannelId;
        camera.deviceId = sipUser;
        camera.host = `${sipServerHost}:${sipServerPort}`;

        // 过滤出有媒体配置，可以播放的。
        cameraSure.push(camera)
      }

      return camera
    });

    return [__cameras, cameraSure]
  }

  function findItem(datas, id) {
    let children = [];
    let item = datas.find(item => {
      if (item.children?.length) children = children.concat(item.children);
      return item.id === id
    });

    if (!item && children.length) item = findItem(children, name);

    return item
  }

  const [cameraList, cameraSure] = filterCameras(cameras);
  function resetDataSource(dataSource, cameraList, id) {
    const listItem = findItem(dataSource, id);

    // 定义缓存
    listItem.catch = new Map();
    if (!listItem.catchItems) listItem.catchItems = new Map();

    // 清空列表
    listItem.children.length = 0;

    cameraList.forEach(item => {
      if (!listItem.catchItems.has(item.id)) {
        listItem.catchItems.set(item.id, item);
      }
      listItem.children.push(item);
    });

    listItem.catch.set(id, cameraList);
    console.log(dataSource, listItem, id);
    return dataSource
  }

  const dataE = resetDataSource(projects, params.id);
  console.log(dataE, cameraList, cameraSure)
</script>
</body>
</html>